<div class="content">
    <div id="example_title">
        <h1>Natural Compare</h1>
        You can use w2utils.naturalCompare for natural sorting of arrays. It can compare strings containing a mix of letters and numbers
        in the way a human being would order it. When defining a grid column just add sortMode: 'natural' property.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div style="width: 170px; float: left">
    Natural Order
    <div style="height: 10px"></div>
    <div id="grid1" style="width: 150px; height: 260px;"></div>
</div>
<div style="width: 170px; float: left">
    Default Order
    <div style="height: 10px"></div>
    <div id="grid2" style="width: 150px; height: 260px;"></div>
</div>
<div style="clear: both; height: 20px;"></div>

You can sort any array in the following way:
<div style="height: 10px;"></div>
<span style="font-size: 13px; font-family: monaco, monospace">Array.sort(w2utils.naturalCompare)</span>

<!--CODE-->
<script type="module">
import { w2ui, query, w2grid } from '__W2UI_PATH__'

query(() => {
    new w2grid({
        box: '#grid1',
        name: 'grid1',
        columns: [
            { field: 'fname', caption: 'First Name', size: '30%', sortable: true, sortMode: 'natural' },
        ],
        records: [
            { "recid": 1, "fname": "Image1.png" },
            { "recid": 2, "fname": "Image2.png" },
            { "recid": 3, "fname": "Image5.png" },
            { "recid": 4, "fname": "image10.png" },
            { "recid": 5, "fname": "image11.jpg" },
            { "recid": 6, "fname": "image12.jpg" },
            { "recid": 7, "fname": "image20.png" },
            { "recid": 8, "fname": "image3.png" },
            { "recid": 9, "fname": "image4.png"  }
        ],
        sortData: [{ field: 'fname', direction: 'asc' }]
    })
    new w2grid({
        box: '#grid2',
        name: 'grid2',
        columns: [
            { field: 'fname', caption: 'First Name', size: '30%', sortable: true },
        ],
        records: [
            { "recid": 1, "fname": "Image1.png" },
            { "recid": 2, "fname": "Image2.png" },
            { "recid": 3, "fname": "Image5.png" },
            { "recid": 4, "fname": "image10.png" },
            { "recid": 5, "fname": "image11.jpg" },
            { "recid": 6, "fname": "image12.jpg" },
            { "recid": 7, "fname": "image20.png" },
            { "recid": 8, "fname": "image3.png" },
            { "recid": 9, "fname": "image4.png"  }
        ],
        sortData: [{ field: 'fname', direction: 'asc' }]
    })

    w2ui.grid1.localSort()
    w2ui.grid2.localSort()
})
</script>